<template>
    <div>
        <el-drawer v-model="drawer2" :direction="direction" :width="800" :before-close="handleClose">
            <template #header>
                <h4 style="font-size: 16px; font-weight: 600;">详情</h4>
            </template>
            <template #default>
                <div class="detail-container">
                    <!-- 标题区域 -->
                    <div class="detail-title">
                        {{ newsForm.newsTitle }}
                    </div>

                    <!-- 来源和时间区域 -->
                    <div class="detail-meta">
                        <span class="source">{{ newsForm.newsSource }}</span>
                        <span class="time">{{ newsForm.newsTime }}</span>
                        <a :href="newsForm.sourceUrl" target="_blank" class="original-link">原文链接</a>
                    </div>

                    <!-- 摘要区域 -->
                    <div class="detail-summary">
                        <p :class="{ 'expanded': isExpanded }" class="abstract-text">{{ newsForm.abstractReal }}</p>
                        <span class="expand-btn" @click="toggleExpand">{{ isExpanded ? '收起' : '展开' }}</span>
                    </div>

                    <!-- 正文内容区域 -->
                    <div class="detail-content">
                        <p v-html="newsForm.markContent && marked.parse(newsForm.markContent)"></p>
                    </div>
                </div>
            </template>
            <template #footer>
                <div style="display: flex; justify-content: flex-end; gap: 10px;">
                    <el-button @click="cancelClick">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确定</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import { marked } from 'marked'

const drawer2 = ref(false)
const direction = ref('rtl')
const newsForm = ref({
    newsTitle: '',
    newsSource: '',
    newsTime: '',
    sourceUrl: '',
    abstractReal: '',
    markContent: ''
})

const emits = defineEmits(['drawer2'])

const isExpanded = ref(false)

const handleClose = (done) => {
    done()
}

const cancelClick = () => {
    drawer2.value = false
}

const confirmClick = () => {
    drawer2.value = false
}

const toggleExpand = () => {
    isExpanded.value = !isExpanded.value
}

// 暴露方法给父组件
defineExpose({
    drawer2,
    newsForm
})
</script>
<style scoped>
.detail-container {
    padding: 20px;
    line-height: 1.6;
}

.detail-title {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #303133;
    line-height: 1.4;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
}

.detail-meta {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    color: #909399;
    font-size: 14px;
}

.source {
    margin-right: 15px;
}

.time {
    margin-right: 15px;
}

.original-link {
    color: #409eff;
    text-decoration: none;
    transition: color 0.3s;
}

.original-link:hover {
    color: #66b1ff;
    text-decoration: underline;
}

.detail-summary {
    background-color: #f5f7fa;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.detail-summary p {
    margin: 0;
    color: #606266;
    font-size: 15px;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}

.detail-summary p.expanded {
    display: block;
    line-clamp: unset;
    -webkit-line-clamp: unset;
}

.expand-btn {
    width: 15%;
    color: #409eff;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    text-align: center;
}

.expand-btn:hover {
    color: #66b1ff;
}

.detail-content {
    font-size: 16px;
    color: #303133;
}

.detail-content p {
    margin: 0 0 15px 0;
}

.detail-content p:last-child {
    margin-bottom: 0;
}

/* 美化抽屉标题 */
:deep(.el-drawer__header) {
    margin-bottom: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebeef5;
}

/* 美化抽屉底部 */
:deep(.el-drawer__footer) {
    padding: 15px 20px;
    border-top: 1px solid #ebeef5;
}

.abstract-text {
    white-space: nowrap;
    /* 禁止文本换行 */
    overflow: hidden;
    /* 隐藏超出部分 */
    text-overflow: ellipsis;
    /* 显示省略号 */
    width: 80%;
    /* 设置宽度，确保省略号能正常工作 */
}

.abstract-text.expanded {
    white-space: normal;
    /* 展开时允许文本换行 */
    overflow: visible;
    /* 展开时显示所有内容 */
    text-overflow: clip;
    /* 展开时不显示省略号 */
}
</style>
